<script setup lang="ts">
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";
import { xemitter } from "@/utils/mitt";
import TwoChart from "@/views/chart/TwoChart.vue";

import Prism from "prismjs"; //
import "prismjs/themes/prism-tomorrow.min.css"; //高亮主题
import { nextTick } from "process";
// import "prismjs/plugins/toolbar/prism-toolbar.min.js"; //工具箱
// import "prismjs/plugins/toolbar/prism-toolbar.min.css"; //工具箱的样式
// import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"; //复制插件
// import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"; //行号插件
// import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"; //行号插件的样式

defineOptions({
  name: ""
});

const tableData = reactive([
  {
    scope_group_name: "test",
    scope_type: "ip",
    scope: "111. 111. 111. 112",
    scope_array: ["111. 111. 111.112", "12. 12. 12.12", "13.13.13.13"],
    black_scope: null,
    black_scope_array: [],
    scope_id: "65994d1b8dbf870043af437c"
  }
]);

const refTable = ref();

const currentPage = ref(1); // 当前页码
const pageSize = ref(15); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

const tableRowClick = (row, column, event) => {
  refTable.value.toggleRowExpansion(row);
  // setTimeout(() => {
  //   Prism.highlightAll(); //这个是核心插件提供的方法，用于代码高亮
  // }, 300);

  nextTick(() => {
    Prism.highlightAll(); //这个是核心插件提供的方法，用于代码高亮
  });
};

const requestStr = `
Access-Control-Allow-Origin:
*
Connection:
keep-alive
Content-Encoding:
gzip
Content-Type:
text/html; charset=utf-8
Date:
Sat, 20 Jan 2024 06:14:33 GMT
Server:
nginx
Set-Cookie:
phpcndatauser_from=www.php.cn%2Ffaq%2F420715.html; expires=Sat, 27-Jan-2024 06:14:33 GMT; Max-Age=604800; path=/; domain=.php.cn
Strict-Transport-Security:
max-age=15768000
Transfer-Encoding:
chunked
X-Via:
1.1 shgd34:8 (Cdn Cache Server V2.0)

X-Ws-Request-Id:
65ab64c9_shgd36_29852-6824
`;

const respenseStr = `
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Playit</title>
	<link rel="stylesheet" type="text/css" href="tryit.css" />
</head>
<body>
	<div id="playitcontainer">
		<div style="width:450px;float:left;">
			<div class="demoHeader">结果:</div>

			<div id="demoParent">
				<div id="demoDIV"><div>
	<pre id="t1">
I	have	tabs	inside!
</pre>
</div></div>
	</div>

	</body>

</html>
`;

const indexMethod = index => {
  // table的index属性为方法时 序号从0开始
  // 序号加1从1开始 + 前面页数的条数总数
  // 前面页数 : 当前页数-1,乘以每页行数
  return index + 1 + (currentPage.value - 1) * 15;
};

const activeKey = ref(["1"]);
onMounted(() => {
  // Prism.highlightAll(); //这个是核心插件提供的方法，用于代码高亮
});
</script>

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="refTable"
      :row-key="row => row.index"
      @row-click="tableRowClick"
    >
      <!-- <el-table-column type="selection" width="55" /> -->

      <el-table-column type="expand">
        <template #default="rowCurrent">
          <div class="des-box">
            <h5 class="des-box-title">漏洞描述：</h5>
            <p class="des-content">
              该漏洞是由于在对用户输入的数据进行处理时，没有对用户输入的数据进行正确的验证，导致攻击者可以构造恶意数据，从而导致应用程序执行非预期的命令。
            </p>
          </div>
          <div class="code-st-box">
            <div class="code-st-item" style="width: 50%; display: inline-block">
              <h5>请求</h5>
              <!-- 注意这里不要用code标签 否则会把你辛苦添加的换行符去掉 -->
              <!-- <pre v-html="jsonStr" /> -->
              <!--     white-space: pre-line; -->
              <pre>
                <!-- data-prismjs-copy="复制"   line-numbers-->
                  <code class="language-shell" >
                    {{ requestStr  }}
                  </code>
                </pre>
            </div>

            <div class="code-st-item">
              <h5>响应</h5>

              <pre>
                  <code class="language-shell" style="tab-size: 2;" >
                  {{ respenseStr   }}
                  </code>
              </pre>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="60"
        label="序号"
        type="index"
        :index="indexMethod"
      />

      <el-table-column label="名称" prop="scope_group_name" />
      <el-table-column
        label="域名"
        min-width="300px"
        width="300px"
        prop="poc_policy_description"
      />
      <el-table-column label="地理位置">
        <!-- <template #default="rowscope">
          <span>{{ transType(rowscope.row) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="ip" prop="scope" />
      <el-table-column label="关联域名" prop="create_time" />
      <el-table-column label="操作系统" prop="create_time" />
      <el-table-column label="操作">
        <!-- <template #default="rowscope">
          <el-button
            size="small"
            type="success"
            class="btn-self-light"
            @click="openCreateTaskModal(rowscope.$index, rowscope.row)"
          >
            下发任务</el-button
          >
          <el-button
            size="small"
            type="primary"
            disabled
            @click="deleteAsset(rowscope.$index, rowscope.row)"
          >
            编辑</el-button
          >
          <el-button
            size="small"
            type="warning"
            @click="deleteScanTactics('single', rowscope.row)"
          >
            删除</el-button
          >
        </template> -->
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
// :deep(.el-table__expand-icon--expanded) {
//   transform: rotate(0);
// }
// :deep(.el-table__expand-icon::before) {
//   content: "展开";
//   font-weight: 700;
// }
.des-box {
  margin: 15px;
  .des-box-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    border-left: 5px solid #409eff;
    padding-left: 10px;
    height: 20px;
    line-height: 20px;
  }
  .des-content {
    font-size: 14px;
    line-height: 1.5;
    color: #606266;
  }
}
.code-st-box {
  margin: 15px;
  .code-st-item {
    width: 50%;
    display: inline-block;
    pre {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      margin-bottom: 10px;
      height: 350px;
      max-height: 350px;
      overflow: auto;
    }
    //滚动条的宽度
    pre::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      // height: 10px;
    }

    //滚动条的滑块
    pre::-webkit-scrollbar-thumb {
      background-color: #909399;
      border-radius: 5px;
    }
  }
}
</style>
